<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>员工花名册 - 人力资源管理系统</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    /* 移除重复的基础样式，只保留页面特定样式 */
    .filter-bar {
      background: #fff;
      border-radius: 4px;
      padding: 16px;
      margin-bottom: 16px;
      border: 1px solid var(--border-color);
    }

    .search-form {
      background: #fff;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 24px;
      margin-bottom: 16px;
    }

    .search-form-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

    .form-item {
      display: flex;
      align-items: center;
    }

    .form-label {
      font-size: 14px;
      color: var(--text-primary);
      margin-right: 8px;
      flex-shrink: 0;
      width: 70px;
      text-align: right;
    }

    .form-input, .form-select {
      flex: 1;
      height: 32px;
      padding: 0 12px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      font-size: 14px;
      background: #fff;
      width: calc(100% - 78px); /* 70px label width + 8px margin */
    }

    .search-buttons {
      display: flex;
      gap: 16px;
    }

    .action-buttons {
      margin-bottom: 16px;
      display: flex;
      gap: 12px;
    }

    .table-area {
      background: #fff;
      border-radius: 4px;
      padding: 16px;
      border: 1px solid var(--border-color);
    }

    .layout {
      display: flex;
      height: 100vh;
    }
    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .topbar {
      height: 56px;
      background: #fff;
      display: flex;
      align-items: center;
      padding: 0 32px;
      border-bottom: 1px solid #e5e6eb;
      justify-content: space-between;
    }
    .topbar .title {
      font-size: 18px;
      font-weight: bold;
      color: #232a3b;
    }
    .topbar .user {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .content {
      flex: 1;
      padding: 24px 32px;
      overflow-y: auto;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      white-space: nowrap;
    }
    th, td {
      padding: 12px 16px;
      border-bottom: 1px solid #f0f0f0;
      text-align: left;
    }
    th {
      background: #fafafa;
      font-weight: 600;
      color: #232a3b;
    }
    tr:hover {
      background: #fafafa;
    }
    .table-actions {
      display: flex;
      gap: 8px;
    }
    .table-actions button {
      padding: 4px 12px;
      border: none;
      border-radius: 4px;
      background: #40a9ff;
      color: #fff;
      cursor: pointer;
      font-size: 12px;
    }
    .table-actions button.secondary {
      background: #f5f7fa;
      color: #232a3b;
    }
    .pagination {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 16px;
      gap: 8px;
    }
    .pagination button {
      padding: 4px 12px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      background: #fff;
      cursor: pointer;
    }
    .pagination button.active {
      background: #40a9ff;
      color: #fff;
      border-color: #40a9ff;
    }

    /* 弹窗样式 */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }
    .modal-overlay.active {
      display: flex;
    }
    .modal-content {
      background: #fff;
      border-radius: 8px;
      width: 500px;
      max-height: 80vh;
      overflow-y: auto;
      padding: 24px;
      position: relative;
    }
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }
    .modal-title {
      font-size: 18px;
      font-weight: bold;
      color: #232a3b;
      margin: 0;
    }
    .modal-close {
      font-size: 20px;
      color: #999;
      cursor: pointer;
      padding: 4px;
      line-height: 1;
    }
    .modal-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .modal-footer {
      margin-top: 24px;
      display: flex;
      justify-content: flex-end;
      gap: 12px;
    }
    .form-item {
      display: flex;
      align-items: center;
    }
    .form-label {
      font-size: 14px;
      color: #232a3b;
      margin-right: 8px;
      flex-shrink: 0;
      width: 70px;
      text-align: right;
    }
    .form-input {
      flex: 1;
      height: 32px;
      padding: 0 12px;
      border: 1px solid #e5e6eb;
      border-radius: 4px;
      font-size: 14px;
      width: calc(100% - 78px);
    }
    .form-select {
      flex: 1;
      height: 32px;
      padding: 0 12px;
      border: 1px solid #e5e6eb;
      border-radius: 4px;
      font-size: 14px;
      background: #fff;
      width: calc(100% - 78px);
    }

    /* 员工详情样式 */
    .detail-card {
      background: #fff;
      border-radius: 8px;
      padding: 24px;
      margin-bottom: 24px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    }
    .detail-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid #e5e6eb;
    }
    .detail-title {
      font-size: 16px;
      font-weight: bold;
      color: #232a3b;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .detail-title::before {
      content: '';
      display: block;
      width: 4px;
      height: 16px;
      background: #40a9ff;
      border-radius: 2px;
    }
    .detail-actions {
      display: flex;
      gap: 16px;
    }
    .detail-button {
      padding: 8px 16px;
      border: 1px solid #e5e6eb;
      border-radius: 4px;
      background: #fff;
      color: #232a3b;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .detail-button.primary {
      background: #40a9ff;
      color: #fff;
      border: none;
    }
    .info-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .info-item {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .info-label {
      font-size: 14px;
      color: #666;
    }
    .info-value {
      font-size: 14px;
      color: #232a3b;
    }
    
    /* 新增员工表单样式 */
    .form-card {
      background: #fff;
      border-radius: 6px;
      padding: 24px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.03);
      margin-bottom: 24px;
    }
    .form-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid #e5e6eb;
    }
    .form-title {
      font-size: 16px;
      font-weight: bold;
      color: #232a3b;
    }
    .capture-btn {
      background: #40a9ff;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 8px 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .form-row {
      display: flex;
      gap: 24px;
      margin-bottom: 16px;
    }
    .form-group {
      flex: 1;
    }
    .preview-grid {
      display: grid;
      grid-template-columns: repeat(2, 300px);
      gap: 24px;
      margin-top: 16px;
    }
    .preview-item {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .preview-item-title {
      font-size: 14px;
      color: #666;
    }
    .id-card-preview {
      position: relative;
      width: 300px;
      height: 190px;
      background: #f5f7fa;
      border-radius: 4px;
      overflow: hidden;
    }
    .id-card-preview.empty {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px dashed #e5e6eb;
      background: #fafafa;
    }
    .id-card-preview.empty::after {
      content: '暂无照片';
      color: #999;
      font-size: 12px;
    }

    /* 打印预览窗口样式 */
    .print-preview {
      width: 800px;
      max-width: 90vw;
      background: #fff;
      padding: 40px;
    }
    .print-preview .contract-content {
      min-height: 500px;
      border: 1px solid #e5e6eb;
      padding: 40px;
      margin: 20px 0;
      font-size: 14px;
      line-height: 1.8;
    }
    @media print {
      .print-preview .modal-header,
      .print-preview .modal-footer {
        display: none;
      }
      .print-preview .contract-content {
        border: none;
        padding: 0;
      }
    }

    .employee-status {
      display: inline-flex;
      align-items: center;
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
    }

    .status-active {
      background: rgba(82, 196, 26, 0.1);
      color: var(--success-color);
    }

    .status-probation {
      background: rgba(250, 173, 20, 0.1);
      color: var(--warning-color);
    }

    .status-resigned {
      background: rgba(255, 77, 79, 0.1);
      color: var(--danger-color);
    }

    .filter-group {
      display: flex;
      gap: 16px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }

    .filter-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .filter-label {
      font-size: 14px;
      color: var(--text-secondary);
      white-space: nowrap;
    }

    .table-actions {
      display: flex;
      gap: 8px;
    }

    .table-actions .btn {
      padding: 4px 12px;
      font-size: 12px;
    }
    
    /* 响应式设计优化 */
    @media screen and (max-width: 1366px) {
      /* 搜索表单优化 */
      .search-form-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      
      /* 内容区域padding调整 */
      .content {
        padding: 16px;
      }
      
      /* 表格内容溢出处理 */
      .table-area {
        overflow-x: auto;
      }
      
      /* 弹窗大小调整 */
      .modal-content[style*="width: 90%"] {
        width: 95% !important;
      }
      
      /* 预览网格调整 */
      .preview-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }
      
      .id-card-preview {
        width: 100%;
      }
    }
    
    @media screen and (max-width: 1024px) {
      /* 搜索表单进一步优化 */
      .search-form-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      
      /* 信息网格调整 */
      .info-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      
      /* 弹窗表单布局调整 */
      .form-row {
        flex-direction: column;
        gap: 16px;
      }
      
      .form-group {
        width: 100%;
      }
      
      /* 预览网格调整 */
      .preview-grid {
        grid-template-columns: 1fr;
      }
    }
    
    @media screen and (max-width: 768px) {
      /* 搜索表单再次优化 */
      .search-form-grid {
        grid-template-columns: 1fr;
      }
      
      /* 操作按钮调整 */
      .table-actions {
        flex-wrap: wrap;
      }
      
      /* 信息网格进一步调整 */
      .info-grid {
        grid-template-columns: 1fr;
      }
      
      /* 头部和尾部调整 */
      .topbar {
        padding: 0 16px;
      }
      
      /* 表格内容适应 */
      table {
        font-size: 12px;
      }
      
      th, td {
        padding: 8px 10px;
      }
      
      /* 分页调整 */
      .pagination {
        flex-wrap: wrap;
      }
    }
    
    /* 表格横向滚动优化 */
    .table-container {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    
    /* 确保表格在横向滚动时表头固定 */
    .sticky-header th {
      position: sticky;
      top: 0;
      z-index: 10;
      background: #fafafa;
    }
  </style>
</head>
<body>
  <div class="layout">
    <!-- 使用公共侧边栏 -->
    <div id="sidebar-container"></div>

    <div class="main">
      <div class="topbar">
        <span class="title">员工花名册</span>
        <div class="user">
          <span>管理员</span>
          <img src="https://via.placeholder.com/32x32.png?text=U" style="border-radius:50%;" alt="用户头像">
        </div>
      </div>
      <div class="content">
        <div class="search-form">
          <div class="search-form-grid">
            <div class="form-item">
              <label class="form-label">姓名</label>
              <input type="text" class="form-input" placeholder="请输入姓名">
            </div>
            <div class="form-item">
              <label class="form-label">工号</label>
              <input type="text" class="form-input" placeholder="请输入工号">
            </div>
            <div class="form-item">
              <label class="form-label">岗位</label>
              <select class="form-select">
                <option value="">全部岗位</option>
                <option value="tech">技术</option>
                <option value="sales">销售</option>
                <option value="admin">行政</option>
                <option value="finance">财务</option>
              </select>
            </div>
            <div class="form-item">
              <label class="form-label">状态</label>
              <select class="form-select">
                <option value="">全部状态</option>
                <option value="active">在职</option>
                <option value="resigned">离职</option>
              </select>
            </div>
            <div class="form-item">
              <label class="form-label">入职日期</label>
              <input type="date" class="form-input">
            </div>
            <div class="form-item">
              <label class="form-label">合同到期</label>
              <input type="date" class="form-input">
            </div>
            <div class="form-item search-buttons">
              <button type="button" class="btn btn-primary">搜索</button>
              <button type="button" class="btn btn-default">重置</button>
            </div>
          </div>
        </div>

        <div class="action-buttons">
          <button class="btn btn-primary">新增员工</button>
          <button class="btn btn-default">批量导入</button>
          <button class="btn btn-default">导出Excel</button>
        </div>

        <div class="table-area">
          <div class="table-container">
            <table style="min-width: 1500px;">
              <thead class="sticky-header">
                <tr>
                  <th width="8%">工作岗位</th>
                  <th width="6%">姓名</th>
                  <th width="5%">性别</th>
                  <th width="5%">民族</th>
                  <th width="10%">身份证号码</th>
                  <th width="10%">银行卡号</th>
                  <th width="7%">开户行</th>
                  <th width="7%">社保卡号</th>
                  <th width="7%">电话号码</th>
                  <th width="7%">派遣公司</th>
                  <th width="7%">入职时间</th>
                  <th width="7%">合同到期时间</th>
                  <th width="7%">离职日期</th>
                  <th width="7%">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Java工程师</td>
                  <td>张三</td>
                  <td>男</td>
                  <td>汉族</td>
                  <td>110101199001011234</td>
                  <td>6222021234567890123</td>
                  <td>中国工商银行</td>
                  <td>1234567890</td>
                  <td>13800138000</td>
                  <td>某人力资源公司</td>
                  <td>2023-01-01</td>
                  <td>2026-01-01</td>
                  <td>-</td>
                  <td class="table-actions">
                    <button onclick="showGenerateContractModal('张三', '2023-01-01', '2026-01-01')">生成合同</button>
                    <button onclick="showPrintContractModal('张三')">打印合同</button>
                    <button>编辑</button>
                    <button class="secondary">详情</button>
                  </td>
                </tr>
                <tr>
                  <td>销售经理</td>
                  <td>李四</td>
                  <td>女</td>
                  <td>汉族</td>
                  <td>310101199002022345</td>
                  <td>6222021234567890124</td>
                  <td>中国建设银行</td>
                  <td>1234567891</td>
                  <td>13900139000</td>
                  <td>某人力资源公司</td>
                  <td>2023-02-01</td>
                  <td>2024-01-31</td>
                  <td>2024-01-31</td>
                  <td class="table-actions">
                    <button onclick="showGenerateContractModal('李四', '2023-02-01', '2024-01-31')">生成合同</button>
                    <button onclick="showPrintContractModal('李四')">打印合同</button>
                    <button>编辑</button>
                    <button class="secondary">详情</button>
                  </td>
                </tr>
                <tr>
                  <td>前端工程师</td>
                  <td>王五</td>
                  <td>男</td>
                  <td>汉族</td>
                  <td>440101199003033456</td>
                  <td>6222021234567890125</td>
                  <td>中国农业银行</td>
                  <td>1234567892</td>
                  <td>13700137000</td>
                  <td>某人力资源公司</td>
                  <td>2023-03-01</td>
                  <td>2026-03-01</td>
                  <td>-</td>
                  <td class="table-actions">
                    <button onclick="showGenerateContractModal('王五', '2023-03-01', '2026-03-01')">生成合同</button>
                    <button onclick="showPrintContractModal('王五')">打印合同</button>
                    <button>编辑</button>
                    <button class="secondary">详情</button>
                  </td>
                </tr>
                <tr>
                  <td>UI设计师</td>
                  <td>赵六</td>
                  <td>女</td>
                  <td>满族</td>
                  <td>330101199004044567</td>
                  <td>6222021234567890126</td>
                  <td>中国银行</td>
                  <td>1234567893</td>
                  <td>13600136000</td>
                  <td>某人力资源公司</td>
                  <td>2023-04-01</td>
                  <td>2026-04-01</td>
                  <td>-</td>
                  <td class="table-actions">
                    <button onclick="showGenerateContractModal('赵六', '2023-04-01', '2026-04-01')">生成合同</button>
                    <button onclick="showPrintContractModal('赵六')">打印合同</button>
                    <button>编辑</button>
                    <button class="secondary">详情</button>
                  </td>
                </tr>
                <tr>
                  <td>产品经理</td>
                  <td>钱七</td>
                  <td>男</td>
                  <td>汉族</td>
                  <td>320101199005055678</td>
                  <td>6222021234567890127</td>
                  <td>中国建设银行</td>
                  <td>1234567894</td>
                  <td>13500135000</td>
                  <td>某人力资源公司</td>
                  <td>2023-05-01</td>
                  <td>2026-05-01</td>
                  <td>-</td>
                  <td class="table-actions">
                    <button onclick="showGenerateContractModal('钱七', '2023-05-01', '2026-05-01')">生成合同</button>
                    <button onclick="showPrintContractModal('钱七')">打印合同</button>
                    <button>编辑</button>
                    <button class="secondary">详情</button>
                  </td>
                </tr>
                <tr>
                  <td>行政助理</td>
                  <td>孙八</td>
                  <td>女</td>
                  <td>壮族</td>
                  <td>430101199006066789</td>
                  <td>6222021234567890128</td>
                  <td>中国工商银行</td>
                  <td>1234567895</td>
                  <td>13400134000</td>
                  <td>某人力资源公司</td>
                  <td>2023-06-01</td>
                  <td>2026-06-01</td>
                  <td>-</td>
                  <td class="table-actions">
                    <button onclick="showGenerateContractModal('孙八', '2023-06-01', '2026-06-01')">生成合同</button>
                    <button onclick="showPrintContractModal('孙八')">打印合同</button>
                    <button>编辑</button>
                    <button class="secondary">详情</button>
                  </td>
                </tr>
                <tr>
                  <td>财务主管</td>
                  <td>周九</td>
                  <td>女</td>
                  <td>汉族</td>
                  <td>510101199007077890</td>
                  <td>6222021234567890129</td>
                  <td>中国农业银行</td>
                  <td>1234567896</td>
                  <td>13300133000</td>
                  <td>某人力资源公司</td>
                  <td>2023-07-01</td>
                  <td>2025-07-01</td>
                  <td>-</td>
                  <td class="table-actions">
                    <button onclick="showGenerateContractModal('周九', '2023-07-01', '2025-07-01')">生成合同</button>
                    <button onclick="showPrintContractModal('周九')">打印合同</button>
                    <button>编辑</button>
                    <button class="secondary">详情</button>
                  </td>
                </tr>
                <tr>
                  <td>人事专员</td>
                  <td>吴十</td>
                  <td>男</td>
                  <td>汉族</td>
                  <td>210101199008088901</td>
                  <td>6222021234567890130</td>
                  <td>中国银行</td>
                  <td>1234567897</td>
                  <td>13200132000</td>
                  <td>某人力资源公司</td>
                  <td>2023-08-01</td>
                  <td>2026-08-01</td>
                  <td>-</td>
                  <td class="table-actions">
                    <button onclick="showGenerateContractModal('吴十', '2023-08-01', '2026-08-01')">生成合同</button>
                    <button onclick="showPrintContractModal('吴十')">打印合同</button>
                    <button>编辑</button>
                    <button class="secondary">详情</button>
                  </td>
                </tr>
                <tr>
                  <td>市场总监</td>
                  <td>郑十一</td>
                  <td>男</td>
                  <td>汉族</td>
                  <td>220101199009099012</td>
                  <td>6222021234567890131</td>
                  <td>中国建设银行</td>
                  <td>1234567898</td>
                  <td>13100131000</td>
                  <td>某人力资源公司</td>
                  <td>2023-09-01</td>
                  <td>2026-09-01</td>
                  <td>-</td>
                  <td class="table-actions">
                    <button onclick="showGenerateContractModal('郑十一', '2023-09-01', '2026-09-01')">生成合同</button>
                    <button onclick="showPrintContractModal('郑十一')">打印合同</button>
                    <button>编辑</button>
                    <button class="secondary">详情</button>
                  </td>
                </tr>
                <tr>
                  <td>运维工程师</td>
                  <td>王十二</td>
                  <td>男</td>
                  <td>汉族</td>
                  <td>120101199010100123</td>
                  <td>6222021234567890132</td>
                  <td>中国工商银行</td>
                  <td>1234567899</td>
                  <td>13000130000</td>
                  <td>某人力资源公司</td>
                  <td>2023-10-01</td>
                  <td>2026-10-01</td>
                  <td>-</td>
                  <td class="table-actions">
                    <button onclick="showGenerateContractModal('王十二', '2023-10-01', '2026-10-01')">生成合同</button>
                    <button onclick="showPrintContractModal('王十二')">打印合同</button>
                    <button>编辑</button>
                    <button class="secondary">详情</button>
                  </td>
                </tr>
                <tr>
                  <td>iOS开发工程师</td>
                  <td>陈十三</td>
                  <td>男</td>
                  <td>汉族</td>
                  <td>530101199011110234</td>
                  <td>6222021234567890133</td>
                  <td>中国农业银行</td>
                  <td>1234567810</td>
                  <td>15800158000</td>
                  <td>某人力资源公司</td>
                  <td>2023-11-01</td>
                  <td>2026-11-01</td>
                  <td>-</td>
                  <td class="table-actions">
                    <button onclick="showGenerateContractModal('陈十三', '2023-11-01', '2026-11-01')">生成合同</button>
                    <button onclick="showPrintContractModal('陈十三')">打印合同</button>
                    <button>编辑</button>
                    <button class="secondary">详情</button>
                  </td>
                </tr>
                <tr>
                  <td>Android开发工程师</td>
                  <td>刘十四</td>
                  <td>女</td>
                  <td>汉族</td>
                  <td>340101199012120345</td>
                  <td>6222021234567890134</td>
                  <td>中国银行</td>
                  <td>1234567811</td>
                  <td>15900159000</td>
                  <td>某人力资源公司</td>
                  <td>2023-12-01</td>
                  <td>2026-12-01</td>
                  <td>-</td>
                  <td class="table-actions">
                    <button onclick="showGenerateContractModal('刘十四', '2023-12-01', '2026-12-01')">生成合同</button>
                    <button onclick="showPrintContractModal('刘十四')">打印合同</button>
                    <button>编辑</button>
                    <button class="secondary">详情</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="pagination">
            <button>上一页</button>
            <button class="active">1</button>
            <button>2</button>
            <button>3</button>
            <button>下一页</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 生成合同弹窗 -->
  <div class="modal-overlay" id="generateContractModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title">生成合同</h3>
        <span class="modal-close" onclick="hideGenerateContractModal()">×</span>
      </div>
      <div class="modal-form">
        <div class="form-item">
          <label class="form-label">员工姓名</label>
          <input type="text" class="form-input" id="contractEmployeeName" readonly>
        </div>
        <div class="form-item">
          <label class="form-label">合同模板</label>
          <select class="form-select" id="contractTemplate">
            <option value="">请选择模板</option>
            <!-- 模板列表将通过API动态加载 -->
          </select>
        </div>
        <div class="form-item">
          <label class="form-label">合同开始时间</label>
          <input type="date" class="form-input" id="contractStartDate" readonly>
        </div>
        <div class="form-item">
          <label class="form-label">合同结束时间</label>
          <input type="date" class="form-input" id="contractEndDate" readonly>
        </div>
      </div>
      <div class="modal-footer">
        <button class="search-button" onclick="hideGenerateContractModal()">取消</button>
        <button class="search-button primary" onclick="generateContract()">确定</button>
      </div>
    </div>
  </div>

  <!-- 打印合同预览弹窗 -->
  <div class="modal-overlay" id="printContractModal">
    <div class="modal-content print-preview">
      <div class="modal-header">
        <h3 class="modal-title">合同打印预览</h3>
        <span class="modal-close" onclick="hidePrintContractModal()">×</span>
      </div>
      <div class="contract-content" id="contractContent">
        <!-- 合同内容将通过API动态加载 -->
      </div>
      <div class="modal-footer">
        <button class="search-button" onclick="hidePrintContractModal()">取消</button>
        <button class="search-button primary" onclick="printContract()">打印</button>
      </div>
    </div>
  </div>

  <!-- 新增员工弹窗 -->
  <div class="modal-overlay" id="addEmployeeModal">
    <div class="modal-content" style="width: 90%; max-width: 1000px; max-height: 90vh; overflow-y: auto;">
      <div class="modal-header">
        <h3 class="modal-title">新增员工</h3>
        <span class="modal-close" onclick="hideAddEmployeeModal()">×</span>
      </div>
      <!-- 复用employee-add.html的内容 -->
      <div style="padding: 0 24px;">
        <!-- 人员信息 -->
        <div class="form-card">
          <div class="form-header">
            <div class="form-title">人员信息（身份证）</div>
            <button class="capture-btn" onclick="openCameraModal('idCard', '身份证正面拍照', 'front')">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="3"/>
                <path d="M19 9h-1.5M5 9h1.5M12 19v1.5M12 4.5V3"/>
              </svg>
              拍照录入
            </button>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">姓名</label>
              <input type="text" class="form-input" placeholder="请输入姓名">
            </div>
            <div class="form-group">
              <label class="form-label">身份证号</label>
              <input type="text" class="form-input" placeholder="请输入身份证号">
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">性别</label>
              <select class="form-input">
                <option value="">请选择性别</option>
                <option value="male">男</option>
                <option value="female">女</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">民族</label>
              <input type="text" class="form-input" placeholder="请输入民族">
            </div>
          </div>
          <div class="preview-grid">
            <div class="preview-item">
              <div class="preview-item-title">身份证正面照片</div>
              <div class="id-card-preview empty" id="idCardFrontPreview">
                <img src="" alt="身份证正面预览" style="display: none;">
              </div>
              <button class="btn btn-default" style="width: 100%; margin-top: 10px;" onclick="openCameraModal('idCard', '身份证正面拍照', 'front')">拍摄正面</button>
            </div>
            <div class="preview-item">
              <div class="preview-item-title">身份证背面照片</div>
              <div class="id-card-preview empty" id="idCardBackPreview">
                <img src="" alt="身份证背面预览" style="display: none;">
              </div>
              <button class="btn btn-default" style="width: 100%; margin-top: 10px;" onclick="openCameraModal('idCard', '身份证背面拍照', 'back')">拍摄背面</button>
            </div>
          </div>
        </div>

        <!-- 银行卡信息 -->
        <div class="form-card">
          <div class="form-header">
            <div class="form-title">银行卡信息</div>
            <button class="capture-btn" onclick="openCameraModal('bankCard', '银行卡拍照', 'front')">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="3"/>
                <path d="M19 9h-1.5M5 9h1.5M12 19v1.5M12 4.5V3"/>
              </svg>
              拍照录入
            </button>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">开户银行</label>
              <input type="text" class="form-input" placeholder="请输入开户银行">
            </div>
            <div class="form-group">
              <label class="form-label">银行卡号</label>
              <input type="text" class="form-input" placeholder="请输入银行卡号">
            </div>
          </div>
        </div>

        <!-- 银行卡照片预览 -->
        <div class="preview-grid">
          <div class="preview-item">
            <div class="preview-item-title">银行卡正面照片</div>
            <div class="id-card-preview empty" id="bankCardFrontPreview">
              <img src="" alt="银行卡正面预览" style="display: none;">
            </div>
            <button class="btn btn-default" style="width: 100%; margin-top: 10px;" onclick="openCameraModal('bankCard', '银行卡正面拍照', 'front')">拍摄正面</button>
          </div>
          <div class="preview-item">
            <div class="preview-item-title">银行卡背面照片</div>
            <div class="id-card-preview empty" id="bankCardBackPreview">
              <img src="" alt="银行卡背面预览" style="display: none;">
            </div>
            <button class="btn btn-default" style="width: 100%; margin-top: 10px;" onclick="openCameraModal('bankCard', '银行卡背面拍照', 'back')">拍摄背面</button>
          </div>
        </div>

        <!-- 社保卡信息 -->
        <div class="form-card">
          <div class="form-header">
            <div class="form-title">社保卡信息</div>
            <button class="capture-btn" onclick="openCameraModal('socialCard', '社保卡拍照')">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="3"/>
                <path d="M19 9h-1.5M5 9h1.5M12 19v1.5M12 4.5V3"/>
              </svg>
              拍照录入
            </button>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">社保卡号</label>
              <input type="text" class="form-input" placeholder="请输入社保卡号">
            </div>
            <div class="form-group">
              <label class="form-label">参保城市</label>
              <input type="text" class="form-input" placeholder="请输入参保城市">
            </div>
          </div>
        </div>
        
        <!-- 社保卡照片预览 -->
        <div style="width: 300px; margin-top: 16px;">
          <div class="preview-item">
            <div class="preview-item-title">社保卡照片</div>
            <div class="id-card-preview empty" id="socialCardPreview">
              <img src="" alt="社保卡预览" style="display: none;">
            </div>
            <button class="btn btn-default" style="width: 100%; margin-top: 10px;" onclick="openCameraModal('socialCard', '社保卡拍照')">拍摄照片</button>
          </div>
        </div>

        <!-- 入职信息 -->
        <div class="form-card">
          <div class="form-header">
            <div class="form-title">入职信息</div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">入职日期</label>
              <input type="date" class="form-input">
            </div>
            <div class="form-group">
              <label class="form-label">工作岗位</label>
              <input type="text" class="form-input" placeholder="请输入工作岗位">
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">合同开始日期</label>
              <input type="date" class="form-input">
            </div>
            <div class="form-group">
              <label class="form-label">合同结束日期</label>
              <input type="date" class="form-input">
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" onclick="hideAddEmployeeModal()">取消</button>
        <button class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
  
  <!-- 员工详情弹窗 -->
  <div class="modal-overlay" id="employeeDetailModal">
    <div class="modal-content" style="width: 90%; max-width: 900px; max-height: 90vh; overflow-y: auto;">
      <div class="modal-header">
        <h3 class="modal-title">员工详情</h3>
        <span class="modal-close" onclick="hideEmployeeDetailModal()">×</span>
      </div>
      <!-- 复用employee-detail.html的内容 -->
      <div style="padding: 0 24px;">
        <!-- 人员信息 -->
        <div class="detail-card">
          <div class="detail-header">
            <div class="detail-title">人员信息</div>
            <div class="detail-actions">
              <button class="detail-button">导出信息</button>
              <button class="detail-button primary">编辑信息</button>
            </div>
          </div>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">姓名</span>
              <span class="info-value">张三</span>
            </div>
            <div class="info-item">
              <span class="info-label">身份证号</span>
              <span class="info-value">3301************1234</span>
            </div>
            <div class="info-item">
              <span class="info-label">性别</span>
              <span class="info-value">男</span>
            </div>
            <div class="info-item">
              <span class="info-label">民族</span>
              <span class="info-value">汉族</span>
            </div>
            <div class="info-item">
              <span class="info-label">工作岗位</span>
              <span class="info-value">Java工程师</span>
            </div>
            <div class="info-item">
              <span class="info-label">入职日期</span>
              <span class="info-value">2024-01-01</span>
            </div>
          </div>
        </div>

        <!-- 银行卡信息 -->
        <div class="detail-card">
          <div class="detail-header">
            <div class="detail-title">银行卡信息</div>
          </div>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">开户银行</span>
              <span class="info-value">中国建设银行</span>
            </div>
            <div class="info-item">
              <span class="info-label">银行卡号</span>
              <span class="info-value">6217 **** **** 1234</span>
            </div>
          </div>
        </div>

        <!-- 社保卡信息 -->
        <div class="detail-card">
          <div class="detail-header">
            <div class="detail-title">社保卡信息</div>
          </div>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">社保卡号</span>
              <span class="info-value">3301 **** **** 5678</span>
            </div>
            <div class="info-item">
              <span class="info-label">参保城市</span>
              <span class="info-value">杭州市</span>
            </div>
          </div>
        </div>

        <!-- 其他信息 -->
        <div class="detail-card">
          <div class="detail-header">
            <div class="detail-title">其他信息</div>
          </div>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">入职状态</span>
              <span class="info-value">正式</span>
            </div>
            <div class="info-item">
              <span class="info-label">试用期</span>
              <span class="info-value">已通过</span>
            </div>
            <div class="info-item">
              <span class="info-label">合同到期日</span>
              <span class="info-value">2027-01-01</span>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" onclick="hideEmployeeDetailModal()">关闭</button>
      </div>
    </div>
  </div>

  <!-- 拍照弹窗 -->
  <div class="modal-overlay" id="cameraModal">
    <div class="modal-content" style="width: 800px; max-width: 90vw;">
      <div class="modal-header">
        <h3 class="modal-title" id="cameraModalTitle">拍照录入</h3>
        <span class="modal-close" onclick="hideCameraModal()">×</span>
      </div>
      <div style="padding: 0 24px;">
        <div class="camera-preview" id="cameraPreview">
          <video id="videoElement" style="width: 100%; height: 400px; object-fit: cover; display: none;"></video>
          <canvas id="captureCanvas" style="width: 100%; height: 400px; object-fit: cover; display: none;"></canvas>
          <div id="cameraPlaceholder" style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 400px; background: #f5f7fa; border-radius: 4px;">
            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1.5">
              <circle cx="12" cy="12" r="8"/>
              <circle cx="12" cy="12" r="2"/>
              <path d="M12 8v-2"/>
              <path d="M12 18v-2"/>
              <path d="M16 12h2"/>
              <path d="M6 12h2"/>
            </svg>
            <p style="color: #666; margin-top: 16px;">点击下方按钮打开摄像头</p>
          </div>
        </div>

        <div class="camera-controls" style="display: flex; justify-content: center; gap: 16px; margin-top: 24px;">
          <button class="btn btn-default" id="openCameraBtn" onclick="openCamera()">打开摄像头</button>
          <button class="btn btn-primary" id="captureBtn" style="display: none;" onclick="capturePhoto()">拍照</button>
          <button class="btn btn-default" id="recaptureBtn" style="display: none;" onclick="reopenCamera()">重新拍照</button>
          <button class="btn btn-primary" id="confirmBtn" style="display: none;" onclick="confirmPhoto()">确认使用</button>
        </div>
      </div>
    </div>
  </div>

  <script src="js/common.js"></script>
  <script>
    // 页面加载完成后加载组件
    document.addEventListener('DOMContentLoaded', loadComponents);

    // 当前拍照类型和当前拍照面
    let currentPhotoType = '';
    let currentPhotoSide = '';
    let capturedImage = '';
    let stream = null;

    // 其他页面特定的 JavaScript 代码
    // 新增员工按钮点击事件
    document.querySelector('.action-buttons .btn-primary').addEventListener('click', function() {
      showAddEmployeeModal();
    });

    // 详情按钮点击事件
    document.querySelectorAll('.table-actions button.secondary').forEach(button => {
      button.addEventListener('click', function() {
        showEmployeeDetailModal();
      });
    });

    // 批量导入按钮点击事件
    document.querySelector('button[style*="background:#faad14"]').addEventListener('click', function() {
      // 触发文件选择
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = '.xlsx,.xls';
      input.click();
      
      input.onchange = function(e) {
        const file = e.target.files[0];
        if (file) {
          // 这里添加文件上传和导入逻辑
          console.log('Selected file:', file.name);
        }
      };
    });

    // 新增员工弹窗控制
    function showAddEmployeeModal() {
      document.getElementById('addEmployeeModal').classList.add('active');
    }
    
    function hideAddEmployeeModal() {
      document.getElementById('addEmployeeModal').classList.remove('active');
    }
    
    // 员工详情弹窗控制
    function showEmployeeDetailModal() {
      document.getElementById('employeeDetailModal').classList.add('active');
    }
    
    function hideEmployeeDetailModal() {
      document.getElementById('employeeDetailModal').classList.remove('active');
    }

    // 加载合同模板列表
    async function loadContractTemplates() {
      try {
        const templateSelect = document.getElementById('contractTemplate');
        templateSelect.innerHTML = '<option value="">请选择模板</option>';
        // 模拟数据
        const templates = [
          { id: 1, name: '标准劳动合同' },
          { id: 2, name: '实习生合同' },
          { id: 3, name: '劳务合同' }
        ];
        templates.forEach(template => {
          const option = document.createElement('option');
          option.value = template.id;
          option.textContent = template.name;
          templateSelect.appendChild(option);
        });
      } catch (error) {
        console.error('加载合同模板失败:', error);
      }
    }

    // 生成合同弹窗控制
    function showGenerateContractModal(employeeName, startDate, endDate) {
      document.getElementById('generateContractModal').classList.add('active');
      document.getElementById('contractEmployeeName').value = employeeName;
      document.getElementById('contractStartDate').value = startDate;
      document.getElementById('contractEndDate').value = endDate;
      loadContractTemplates();
    }

    function hideGenerateContractModal() {
      document.getElementById('generateContractModal').classList.remove('active');
    }

    // 打印合同弹窗控制
    function showPrintContractModal(employeeName) {
      document.getElementById('printContractModal').classList.add('active');
      // 模拟加载合同内容
      document.getElementById('contractContent').innerHTML = `
        <h2 style="text-align:center">劳动合同</h2>
        <p>甲方：XX公司</p>
        <p>乙方：${employeeName}</p>
        <p>根据《中华人民共和国劳动法》和有关规定，甲乙双方在平等自愿、协商一致的基础上，签订本合同，共同遵守本合同所列条款。</p>
        <!-- 这里是合同的具体内容，将通过API获取 -->
      `;
    }

    function hidePrintContractModal() {
      document.getElementById('printContractModal').classList.remove('active');
    }

    // 生成合同
    async function generateContract() {
      const employeeName = document.getElementById('contractEmployeeName').value;
      const template = document.getElementById('contractTemplate').value;
      const startDate = document.getElementById('contractStartDate').value;
      const endDate = document.getElementById('contractEndDate').value;

      if (!template) {
        alert('请选择合同模板');
        return;
      }

      try {
        // 这里将通过API生成合同
        console.log('生成合同:', { employeeName, template, startDate, endDate });
        hideGenerateContractModal();
        // 生成成功后可以直接打开打印预览
        showPrintContractModal(employeeName);
      } catch (error) {
        console.error('生成合同失败:', error);
      }
    }

    // 打印合同
    function printContract() {
      window.print();
    }

    // 拍照弹窗控制
    function openCameraModal(type, title, side = 'front') {
      currentPhotoType = type;
      currentPhotoSide = side;
      document.getElementById('cameraModalTitle').textContent = title;
      document.getElementById('cameraModal').classList.add('active');
      
      // 重置相机界面
      document.getElementById('videoElement').style.display = 'none';
      document.getElementById('captureCanvas').style.display = 'none';
      document.getElementById('cameraPlaceholder').style.display = 'flex';
      document.getElementById('openCameraBtn').style.display = 'block';
      document.getElementById('captureBtn').style.display = 'none';
      document.getElementById('recaptureBtn').style.display = 'none';
      document.getElementById('confirmBtn').style.display = 'none';
    }
    
    function hideCameraModal() {
      document.getElementById('cameraModal').classList.remove('active');
      // 关闭摄像头资源
      if (stream) {
        stream.getTracks().forEach(track => track.stop());
        stream = null;
      }
    }
    
    // 打开摄像头
    async function openCamera() {
      try {
        stream = await navigator.mediaDevices.getUserMedia({ video: true });
        const videoElement = document.getElementById('videoElement');
        videoElement.srcObject = stream;
        videoElement.play();
        
        // 显示视频元素和拍照按钮
        document.getElementById('videoElement').style.display = 'block';
        document.getElementById('cameraPlaceholder').style.display = 'none';
        document.getElementById('openCameraBtn').style.display = 'none';
        document.getElementById('captureBtn').style.display = 'block';
      } catch (error) {
        console.error('打开摄像头失败:', error);
        alert('无法访问摄像头，请确保已授予摄像头访问权限。');
      }
    }
    
    // 拍照
    function capturePhoto() {
      const videoElement = document.getElementById('videoElement');
      const canvas = document.getElementById('captureCanvas');
      const context = canvas.getContext('2d');
      
      // 设置canvas大小为视频实际大小
      canvas.width = videoElement.videoWidth;
      canvas.height = videoElement.videoHeight;
      
      // 在canvas上绘制视频当前帧
      context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
      
      // 获取照片数据
      capturedImage = canvas.toDataURL('image/jpeg');
      
      // 显示拍摄结果
      document.getElementById('videoElement').style.display = 'none';
      document.getElementById('captureCanvas').style.display = 'block';
      document.getElementById('captureBtn').style.display = 'none';
      document.getElementById('recaptureBtn').style.display = 'block';
      document.getElementById('confirmBtn').style.display = 'block';
      
      // 停止摄像头
      if (stream) {
        stream.getTracks().forEach(track => track.stop());
        stream = null;
      }
    }
    
    // 重新打开摄像头
    function reopenCamera() {
      // 隐藏canvas，清空拍摄结果
      document.getElementById('captureCanvas').style.display = 'none';
      document.getElementById('recaptureBtn').style.display = 'none';
      document.getElementById('confirmBtn').style.display = 'none';
      capturedImage = '';
      
      // 重新打开摄像头
      openCamera();
    }
    
    // 确认使用拍摄的照片
    function confirmPhoto() {
      if (!capturedImage) return;
      
      // 根据当前拍照类型和面，更新对应的预览图片
      let previewElement;
      
      if (currentPhotoType === 'idCard') {
        if (currentPhotoSide === 'front') {
          previewElement = document.getElementById('idCardFrontPreview');
        } else {
          previewElement = document.getElementById('idCardBackPreview');
        }
      } else if (currentPhotoType === 'bankCard') {
        if (currentPhotoSide === 'front') {
          previewElement = document.getElementById('bankCardFrontPreview');
        } else {
          previewElement = document.getElementById('bankCardBackPreview');
        }
      } else if (currentPhotoType === 'socialCard') {
        previewElement = document.getElementById('socialCardPreview');
      }
      
      // 更新预览图片
      if (previewElement) {
        // 获取img元素或创建新的
        let imgElement = previewElement.querySelector('img');
        if (!imgElement) {
          imgElement = document.createElement('img');
          previewElement.appendChild(imgElement);
        }
        
        // 设置图片源并显示
        imgElement.src = capturedImage;
        imgElement.style.display = 'block';
        
        // 移除empty类
        previewElement.classList.remove('empty');
      }
      
      // 关闭弹窗
      hideCameraModal();
    }
  </script>
</body>
</html> 